<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = '友链' + ' - ' + ${site.title},htmlType = page,header = null,leftSidebar = true,rightSidebar = true, content = ~{::content}, head = null, footer = null)}"
>
<th:block th:fragment="content">
  <main class="main full-width">
    <article class="has-image main-article">
      <header class=article-header>
        <div class=article-image>
          <a th:href="${singlePage.status.permalink}">
            <img th:src="${singlePage.spec.cover}" loading=lazy th:alt="${singlePage.spec.title}">
          </a>
        </div>
        <div class=article-details>
          <div class=article-title-wrapper>
            <h2 class=article-title>
              <a th:href="${singlePage.status.permalink}"
                 th:text="${singlePage.spec.title}">

              </a>
            </h2>
          </div>
          <footer class=article-time>
            <div>
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock"
                   width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor"
                   fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" />
                <circle cx="12" cy="12" r="9" />
                <polyline points="12 7 12 12 15 15" />
              </svg>
              <time class=article-time--reading th:with="wordCount = ${#strings.length(singlePage.content.content)}">
                <th:block th:if="${wordCount / 400 lt 1}">
                  阅读时长: 1 分钟
                </th:block>
                <th:block th:if="${wordCount / 400 ge 1}">
                  阅读时长: [[${wordCount / 400}]] 分钟
                </th:block>
              </time>
            </div>
          </footer>

        </div>
      </header>
      <section class=article-content th:utext="${singlePage.content.content}">

      </section>
      <footer class=article-footer>
      </footer>
    </article>

<!--    评论组件-->
    <th:block th:replace="~{modules/widgets/article-comment :: ${theme.config.article.articleComment}}" />

    <footer th:replace="~{modules/footer :: footer}"></footer>

  </main>
</th:block>
</html>